import React from 'react';
import { List, Tooltip } from 'tea-component';
import { BOTTOM_MENU_LIST, MENU_LIST } from '@ide/utils/menu';
import useAppStore from '@ide/store';

export default function SideMenu({ value, onChange }: { value: string, onChange: (type: string) => void }) {
  const { setModalVisible } = useAppStore();

  return <><List>
    {MENU_LIST.map((item) => <Tooltip key={item.type} title={item.title}>
      <List.Item onClick={() => {
        onChange(item.type);
      }} className={'side-menu-list'}><img src={value === item.type ? item.active : item.icon} /></List.Item>
    </Tooltip>)}
  </List>
  <List className='bottom_menu'>
    {BOTTOM_MENU_LIST.map((item) => <Tooltip key={item.type} title={item.title}>
      <List.Item onClick={() => {
        switch (item.type) {
          case 'set':
            setModalVisible(true);
            break;
          case 'reminder':
            window.open('https://docs.chainmaker.org.cn/instructions/%E4%BD%BF%E7%94%A8SmartIDE%E7%BC%96%E5%86%99Go%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6.html');
            break;
          default:
            break;
        }
      }} className={'side-menu-list'}><img src={value === item.type ? item.active : item.icon} /></List.Item>
    </Tooltip>)}
  </List>
  </>;
}
